import React, { useState } from 'react'
import { Toast, NavBar } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { Cell, Popup } from 'react-vant';
import { Button } from 'react-vant'
function index() {
    const navigate = useNavigate()
    const [visible, setVisible] = useState(false)
    const headeradd = () => {
        setVisible(true)
    }
    return (
        <div>
            <NavBar
                title='我的家庭'
                leftText='返回'
                onClickLeft={() => navigate(-1)}
                onClickRight={() => Toast('按钮')}
            />

            <div>
                <Cell title='添加本人' isLink />
                <Cell title='添加父母' isLink />
                <Cell title='添加爱人' isLink />
                <Cell title='添加子女' isLink />
            </div>
            <div>
                <Button type='primary' block round onClick={headeradd}>
                    + 添加其他家人
                </Button>
            </div>
            <div>
                <Popup visible={visible} onClose={() => setVisible(false)}>
                    <div style={{ padding: '30px 50px' }}>
                        请让本人添加
                    </div>
                </Popup>
            </div>
        </div>
    )
}

export default index